import React from 'react';
import { inject, observer } from 'mobx-react';
import { Tools } from 'weaver-mobile'
import { TabPage, RouteLayout } from 'weaver-mobile-page';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'



import AgentList from './AgentList'
import AdvancedItem from './AdvancedItem'
import AddAgent from './AddAgent'
import BatchEdit from './BatchEdit'
import EditAgent from './EditAgent'
import EditDetails from './EditDetails'
import TemManagement from './TemManagement'
import ImportFromTem from './ImportFromTem'
import SearchPage from './SearchPage'

const Item = TabPage.Item;
const getLabel = Tools.getLabel;
const tabs = [
    { title: getLabel(383596,'我的代理设置'), sub: 0 },
    { title: getLabel(383597,'我代处理的流程'), sub: 1 },
    { title: getLabel(383598,'交办他人的流程'), sub: 2 },
    { title: getLabel(383599,'全部代理设置'), sub: 3 },
];

@withRouter
@inject('wfAgentStore')
@observer
export default class Agent extends React.Component {
    componentDidMount() {
        const { location, wfAgentStore } = this.props;
        const { changeTab } = wfAgentStore;
        const { pathname = "" } = location;
        switch (pathname) {
            case "/agent": changeTab(0); break;
            case "/agent/mineAgentSet": changeTab(0); break;
            case "/agent/hadAgented": changeTab(1); break;
            case "/agent/toOthersAgent": changeTab(2); break;
            case "/agent/all": changeTab(3); break;
            default: ;
        }
    }
    componentWillUpdate(nextState) {
        const { isInAddAgent } = nextState.wfAgentStore.addAgent;
        if (isInAddAgent === true) {
            this.props.history.push("/agent/addAgent");
        }
    }
    componentDidUpdate() {
        const { location, wfAgentStore } = this.props;
        const { initDatas } = wfAgentStore;
        const { pathname = "" } = location;
        const { nowPath } = initDatas;
        if ((nowPath !== pathname)) {
            this.changeTab(pathname);
        }
    }

    changeTab = (pathname) => {
        const { wfAgentStore } = this.props;
        const { changeTab } = wfAgentStore;
        switch (pathname) {
            case "/agent": changeTab(0); break;
            case "/agent/mineAgentSet": changeTab(0); break;
            case "/agent/hadAgented": changeTab(1); break;
            case "/agent/toOthersAgent": changeTab(2); break;
            case "/agent/all": changeTab(3); break;
            default: "";
        }
    }
    //点击tab项跳路由
    handleTabChange = tab => {
        const { setState, changeTab, setInitDatas, getAgentDatas } = this.props.wfAgentStore;
        setState({ currentTab: this.sub })
        switch (tab.sub) {
            case 0:
                this.props.history.push({ pathname: '/agent/mineAgentSet' });
                break;
            case 1:
                this.props.history.push({ pathname: '/agent/hadAgented' });
                break;
            case 2:
                this.props.history.push({ pathname: '/agent/toOthersAgent' });
                break;
            case 3:
                this.props.history.push({ pathname: '/agent/all' });
                break;
            default: "";
        }
    }
    //am-tabs-expand-bar-underline

    //获取当前路由路径来确定当前是哪一个tab页
    getCurrentPage = (path) => {
        let num = 0;
        switch (path) {
            case '/agent': num = 0; break;
            case '/agent/mineAgentSet': num = 0; break;
            case '/agent/hadAgented': num = 1; break;
            case '/agent/toOthersAgent': num = 2; break;
            case '/agent/all': num = 3; break;
            default:
        }
        return num;
    }

    //三个点下的内容
    getOverlay = (currentpage) => {
        const overlay1 = [
            (<Item key="0" value="add" data-seed="logId" >{getLabel(33242,"新建代理")}</Item>),
            (<Item key="1" value="add" data-seed="logId" >{getLabel(32385,"从模板导入")}</Item>),
            (<Item key="2" value="add" data-seed="logId" >{getLabel(20823,"模板管理")}</Item>),
            (<Item key="3" value="add" data-seed="logId" >{getLabel(33243,"批量收回")}</Item>),
            (<Item key="4" value="add" data-seed="logId" >{getLabel(383518,"批量编辑")}</Item>),
        ];
        const overlay2 = [
            (<Item key="0" value="add" data-seed="logId" >{getLabel(33242, "新建代理")}</Item>),
            (<Item key="1" value="add" data-seed="logId" >{getLabel(32385, "从模板导入")}</Item>),
            (<Item key="2" value="add" data-seed="logId" >{getLabel(20823, "模板管理")}</Item>),
        ];
        if (currentpage === 0 || currentpage === 3) { return overlay1; }
        else { return overlay2; }
    }
    //点击三个点下的内容
    handleSelect = (node, index) => {
        const { history } = this.props;
        const { setAddAgent, setInitDatas, agentTemplateList } = this.props.wfAgentStore;
        if (index === 0) {        //新建代理
            setAddAgent({ symbol: "addAgent" })
            this.props.history.push("/agent/addAgent")
        } else if (index === 1) { //从模板导入
            const { setImportFromTemData } = this.props.wfAgentStore;
            setImportFromTemData({ isAdvancedSearching: false })
            history.push("/agent/importFromTem");
        } else if (index === 2) {  //模板管理
            // agentTemplateList();
            this.props.history.push("/agent/temManagement")
        } else if (index === 3) {  //批量收回
            setInitDatas({ isShowCheck: true, propsVisiable: false, batchEditOrBatchReceive: 1 })
        } else if (index === 4) {  //批量编辑
            setInitDatas({ isShowCheck: true, propsVisiable: false, batchEditOrBatchReceive: 0 })
        }
    }

    handleVisibleChange = (visible) => {
        const { setInitDatas } = this.props.wfAgentStore;
        setInitDatas({ propsVisiable: visible })
    }

    render() {
        const { location } = this.props;
        const { initDatas, layout, searchPage_layout, onSearchSubmit } = this.props.wfAgentStore;
        const { propsVisiable } = initDatas;
        const currentpage = this.getCurrentPage(this.props.location.pathname);
        const showHover = (location &&
            (location.pathname === "/agent/hadAgented" ||
                location.pathname === "/agent/mineAgentSet" ||
                location.pathname === "/agent/toOthersAgent" ||
                location.pathname === "/agent/all"));
        let popoverProps = {
            mask: showHover ? 1 : 0,
            visible: propsVisiable,
            overlay: this.getOverlay(currentpage),
            onSelect: this.handleSelect,
            onVisibleChange: this.handleVisibleChange,
        };
        return (
            <div className="addAgent">
                <div style={{ display: showHover ? "block" : "none" }} className='wf-agent-addagent'>
                    <TabPage
                        span={[11, 2]}
                        tabs={tabs}
                        defaultTabBarProps={{ page: 0 }}
                        tabProps={{ onChange: this.handleTabChange, page: currentpage }}//点击tab走这个方法////, page: currentpage
                        popover
                        popoverProps={popoverProps} />
                    <Switch>
                        <Route path="/agent/mineAgentSet" component={AgentList} />
                        <Route path="/agent/hadAgented" component={AgentList} />
                        <Route path="/agent/toOthersAgent" component={AgentList} />
                        <Route path="/agent/all" component={AgentList} />
                        <Redirect exact path="/agent" to={{ pathname: '/agent/mineAgentSet' }} />
                    </Switch>
                </div>
                <div style={{ display: !showHover ? "block" : "none" }} className='wf-agent-addagent'>
                    <Route path="/agent/addAgent" component={AddAgent} />
                    <Route path="/agent/batchEdit" component={BatchEdit} />
                    <Route path="/agent/temManagement" component={TemManagement} />
                    <Route path="/agent/advancedItem" component={AdvancedItem} />
                    <Route path="/agent/editAgent" component={EditAgent} />
                    <Route path="/agent/editDetails" component={EditDetails} />
                    <Route path="/agent/importFromTem" component={ImportFromTem} />
                </div>
                <Route
                    key={layout.id}
                    path={layout.path}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <AdvancedItem />
                            </div>
                        </RouteLayout>
                    )}
                />
                <Route
                    key={searchPage_layout.id}
                    path={searchPage_layout.path}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <SearchPage
                                    onSubmit={onSearchSubmit}
                                />
                            </div>
                        </RouteLayout>
                    )}
                />
            </div>
        )
    }

}
